<template>
  <div class="main commodity-manage-edit">
    <div class="section">
      <el-form :model="formData" :rules="formRules" size="medium" ref="form" label-width="100px">
        <el-form-item label="角色名称:" prop="role">
          <el-input v-model="formData.role"></el-input>
        </el-form-item>
        <el-form-item label="角色描述:" prop="description">
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="分配资源:" prop="resourceIdList">
          <div style="padding-top: 6                                                                                                                                                                                                                                                                                                                                                                                                                                                                              px;">
            <tree :checked.sync="formData.resourceIdList" @change="setKeys"></tree>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn-center">
        <el-button class="filter-item" type="success" :loading="btnDisabled" @click="save">保存</el-button>
        <el-button class="filter-item" type="primary" plain @click="$router.back()">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Tree from "./tree"

export default {
  name: "userRoleEdit",
  components: {
    Tree
  },
  props: {
    id: { default: "" }
  },
  data() {
    return {
      formRules: {
        role: [
          { required: true, message: "不能为空", trigger: "change" },
          { max: 100, message: "不能超过100字符", trigger: "change" },
          {
            pattern: /[\a-zA-Z0-9\u4e00-\u9FA5]+$/,
            message: "不能含有特殊字符",
            trigger: "change"
          }
        ],
        description: [
          { required: true, message: "不能为空", trigger: "change" },
          { max: 255, message: "不能超过255字符", trigger: "change" }
        ]
      },
      formData: {
        role: "",
        description: "",
        resourceIdList: []
      },
      btnDisabled: false
    }
  },
  computed: {
    isEdit() {
      return this.id && this.$route.name === "userRoleEdit";
    }
  },
  created() {
    if (this.isEdit) {
      this.fetchData()
    }
  },
  methods: {
    fetchData() {
      this.request({
        url: "/bsnl-authority/role/get",
        method: "get",
        params: { id: this.id }
      }).then(({ data = {} }) => {
        const { role, description, resourceIdList } = data
        this.formData = { role, description, resourceIdList }
      }).catch(err => {
        this.formData = {
          role: "",
          description: "",
          ids: []
        }
      })
    },
    setKeys(keys) {
      this.formData.resourceIdList = keys
    },
    // 保存
    save() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        let url = this.isEdit ? "/bsnl-authority/role/update" : "/bsnl-authority/role/create"
        this.btnDisabled = true

        const data = {
          ...this.formData,
          id: this.isEdit ? this.id : undefined,
          resourceIds: this.formData.resourceIdList.join(','),
          deleteFlag: 1
        }
        delete data.resourceIdList

        this.request({url, method: "post", data}).then(() => {
          this.btnDisabled = false
          this.$message.success("保存成功")
          this.$router.push({ name: "userRole" })
        }).catch(err => {
          this.btnDisabled = false
        })
      })
    }
  }
}
</script>